<template>
    <div class="HomeGongGe"> 

        <van-swipe class="my-swipe" indicator-color="white" :loop='false' :show-indicators="true">
   <!-- 宫格展示  -->
   <van-swipe-item :border="false" >
            <van-grid :gutter="5" :column-num=5>
                <van-grid-item v-for="item in GongGeArr" :key="item.id" :icon="item.img" :text="item.title" />
            </van-grid>
        </van-swipe-item>
        <van-swipe-item>
            <van-grid :gutter="5" :column-num=5>
                <van-grid-item v-for="item in GongGeArr2" :key="item.id" :icon="item.img" :text="item.title" :icon-size =50 />
            </van-grid>
        </van-swipe-item>

</van-swipe>

</div>

</template>


<script setup lang="ts">
let GongGeArr = [
{id:1,title:'超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:2,title:'电器',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png'},
    {id:3,title:'新百货',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png'},
    {id:4,title:'生鲜',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png'},
    {id:5,title:'到家',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png'},
    {id:6,title:'充值',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png'},
    {id:7,title:'附近',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png'},
    {id:8,title:'领券',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png'},
    {id:9,title:'会员',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png'},
    {id:10,title:'国际',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png'}

]

let GongGeArr2 = [
{id:1,title:'超市',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png'},
    {id:2,title:'电器',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png'},
    {id:3,title:'新百货',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png'},
    {id:4,title:'生鲜',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png'},
    {id:5,title:'到家',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png'},
    {id:6,title:'充值',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png'},
    {id:7,title:'附近',img:'https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png'},]

</script>
<style scoped lang="scss">
.my-swipe .van-swipe-item {
    color:red;
    font-size: 18px;
    line-height: 150px;
    text-align: center;
    background-color: #f9fcfd;
    --van-grid-item-icon-size:40px
}
</style>